import { Avatar, Icon, Menu, Spin, Button , Divider, Tooltip, Modal} from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import ResetPassword from './ResetPassword';
import styles from './index.less';

const {confirm} = Modal;

class AvatarDropdown extends React.Component {

  state={
    resetModalVisible:false
  }

  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }

    if (key === 'modifyPwd') {
      this.setState({
        resetModalVisible: true
      });

      return;
    }

    router.push(`/account/${key}`);
  };

  showLogoutConfirm=()=> {
    const { dispatch } = this.props;
    confirm({
      title: '确定退出登录?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        if (dispatch) {
          dispatch({
            type: 'login/logout',
          });
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  render() {
    const {resetModalVisible} = this.state;
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {/* 个人中心*/}
        {/*{menu && (*/}
          {/*<Menu.Item key="center">*/}
            {/*<Icon type="user" />*/}
            {/*<FormattedMessage id="menu.account.center" defaultMessage="account center" />*/}
          {/*</Menu.Item>*/}
        {/*)}*/}
        {/* 账户设置*/}
        {/*{menu && (*/}
          {/*<Menu.Item key="settings">*/}
            {/*<Icon type="setting" />*/}
            {/*<FormattedMessage id="menu.account.settings" defaultMessage="account settings" />*/}
          {/*</Menu.Item>*/}
        {/*)}*/}
        {/* 修改密码*/}
        {menu && (
          <Menu.Item key="modifyPwd">
            <Icon type="setting" />
            <span>修改密码</span>
          </Menu.Item>
        )}
        {/* 推出登录*/}
        {/*{menu && <Menu.Divider />}*/}
        {/*<Menu.Item key="logout">*/}
          {/*<Icon type="logout" />*/}
          {/*<FormattedMessage id="menu.account.logout" defaultMessage="logout" />*/}
        {/*</Menu.Item>*/}
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <><HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`} style={{borderRadius:5}}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar? currentUser.avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'} alt="avatar" />
          <span className={styles.name}>{currentUser.name}</span>
        </span>
      </HeaderDropdown>
      <Divider type="vertical" />
      <Tooltip placement="bottom" title='退出登录'>
        <Button type="link" onClick={this.showLogoutConfirm} style={{marginRight: 10, height:'100%'}} className={styles.logout}>
          <Icon type="logout"/>
        </Button>
      </Tooltip>
      <ResetPassword
        modalVisible={resetModalVisible}
        parent={this}
      />
      </>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
